<script lang="ts" setup>
import { get, post, message, loadFile, formatOptions } from '@/utils'
import { UseCouponType, CouponType } from '@/enum/coupon'
import { FormInstance } from '@arco-design/web-vue'
import ProductModal from '@/components/SelectModal/Product.vue'
import useModal from '@/hooks/useModal'
import { ProductClient } from '@/enum/product'
const props = defineProps<{
  show: boolean
  id: number | string
  info?: any
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { store } = useModal()
const formRef = ref() as Ref<FormInstance>
const detail = reactive({
  name: '',
  money: 0,
  status: 0,
  total: 0,
  type: CouponType.手动领取,
  useStartTime: '',
  useEndTime: '',
  useType: UseCouponType.平台券,
  minPrice: 0,
  day: 1,
  brief: '',
  clientType: '' as unknown as ProductClient,
  sort: '' as any,
  primaryKey: '',
  isFixedTime: 0,
  limitNum: 0,
})
const submit = done => {
  const query = Object.assign({}, detail)
  console.log('🚀 ~ file: Modal.vue:39 ~ formRef.value.validate ~ query:', query)
  // done(false);
  // return;
  formRef.value.validate(err => {
    if (!err) {
      const url = props.id ? '/server-shop/admin/coupon/update' : '/server-shop/admin/coupon/save'

      post(
        { url, data: query },
        ({ code, msg }) => {
          message({
            type: code == 200 ? 'success' : 'error',
            content: msg,
          })
          emit('update:show', false)
          emit('confirm')
          done(true)
        },
        () => done(false)
      )
    } else {
      console.log('🚀 ~ file: Modal.vue:37 ~ formRef.value.validate ~ err:', err)
      done(false)
    }
  })
}
const onConfirm = data => {
  detail.primaryKey = data.filter(Boolean).join(',')
}
const getInfo = () => {
  get({ url: '/server-shop/admin/coupon/info', data: { id: props.id } }, ({ data }) => {
    Object.assign(detail, data)
    // detail.isFixedTime = data.day ? 0 : 1
  })
}

onMounted(() => {
  if (props.id) getInfo()
})
</script>
<template>
  <CDrawer v-model:visible="props.show" @before-ok="submit" :mask-closable="false" width="700px" :title="props.id ? '编辑' : '新建'" @cancel="emit('update:show', false)">
    <div class="content">
      <a-form :model="detail" ref="formRef" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
        <a-form-item label="优惠券名称" field="name" :rules="[{ required: true, message: '请输入优惠券名称' }]" :validate-trigger="['change', 'blur']">
          <a-input v-model="detail.name" placeholder="请输入优惠券名称" />
        </a-form-item>
        <a-form-item label="优惠券状态" field="status" :rules="[{ required: true, message: '请选择优惠券状态' }]" :validate-trigger="['change', 'blur']">
          <a-select
            :options="[
              { label: '启用', value: 1 },
              { label: '关闭', value: 0 },
            ]"
            v-model="detail.status"
            placeholder="请选择"
          />
        </a-form-item>
        <a-form-item label="优惠券金额" field="money" :rules="[{ required: true, message: '请输入优惠券金额' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.money" placeholder="请输入优惠券金额" />
        </a-form-item>
        <a-form-item label="最低消费" field="minPrice" :rules="[{ required: true, message: '请输入最低消费' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.minPrice" placeholder="请输入最低消费" />
        </a-form-item>
        <a-form-item label="发放数量" field="total" :disabled="!!props.id" :rules="[{ required: true, message: '请输入发放数量' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.total" placeholder="请输入发放数量" />
        </a-form-item>
        <a-form-item label="每人限领" extra="0为不做限制" field="limitNum" :rules="[{ required: true, message: '请输入发放数量' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.limitNum" placeholder="请输入每人限领" />
        </a-form-item>
        <a-form-item label="领取方式">
          <a-radio-group v-model="detail.type" type="button" :options="formatOptions(CouponType)" />
        </a-form-item>
        <a-form-item label="使用时间">
          <a-radio-group v-model="detail.isFixedTime" type="button">
            <a-radio :value="0">按天数</a-radio>
            <a-radio :value="1">按时间段</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="使用天数" v-if="detail.isFixedTime == 0" field="day" :rules="[{ required: true, message: '请输入使用天数' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="1" v-model="detail.day" placeholder="请输入使用天数" />
        </a-form-item>
        <a-form-item label="使用时间段" v-else field="useStartTime" :rules="[{ required: true, message: '请选择使用时间段' }]" :validate-trigger="['change', 'blur']">
          <a-range-picker :default-value="[detail.useStartTime, detail.useEndTime]" style="width: 100%" @Select="times => ([detail.useStartTime, detail.useEndTime] = times as any[])" />
        </a-form-item>

        <a-form-item label="排序" field="sort" :rules="[{ required: true, message: '请输入排序' }]" :validate-trigger="['change', 'blur']">
          <a-input-number :min="0" v-model="detail.sort" placeholder="请输入排序" />
        </a-form-item>

        <a-form-item label="使用说明" field="total" :rules="[{ required: true, message: '请输入使用说明' }]" :validate-trigger="['change', 'blur']">
          <a-textarea v-model="detail.brief" placeholder="请输入使用说明" :max-length="200" show-word-limit />
          <!-- <Editor v-model:content="detail.brief" :height="200" /> -->
        </a-form-item>
      </a-form>
    </div>
    <ProductModal v-if="store.show" v-model:show="store.show" type="checkbox" :id="store.id" :ids="detail.primaryKey.split(',')" @confirm="onConfirm" @cancel="store.cancel" />
  </CDrawer>
</template>
<style lang="less" scoped></style>
